<template>
    <div>
      <q-field icon="search">
          <q-input v-model.trim="keywords" max-length=32 
          placeholder="试试搜索您想要的"
          :after="[{icon: 'send', content: true, handler:searchAction }]"/>
      </q-field>
      <q-list>
        <q-list-header>{{cateTitle}}</q-list-header>
        <div v-for="item in gooItems" :key="item.id">
          <q-item @click="toItemDetail(item.id)" link>
            <q-item-side :image="item.attashments[0]" />
            <q-item-main>
              <q-item-tile label lines="2">{{item.name}}</q-item-tile>
              <q-item-tile sublabel lines="1">
                  <span style="color:red;font-size: 1.2rem">
                      ￥{{item.sellPrice}}
                  </span>
                  <span style="text-decoration: line-through">
                      ￥ {{item.originPrice}}
                  </span>
              </q-item-tile>
              <q-item-tile sublabel lines="1">
                <q-icon name="favorite" />({{item.recommendNo}})
                <q-icon name="visibility" />({{item.pv}})
              </q-item-tile>
            </q-item-main>
          </q-item>
          <q-item-separator />
        </div>
      </q-list>
    </div>
</template>

<script>
import {
  QList,
  QListHeader,
  QItem,
  QItemSeparator,
  QItemSide,
  QItemMain,
  QItemTile,
  QIcon,
  QField,
  QInput,
    QFixedPosition,
} from "quasar";

export default {
  components: {
    QList,
    QListHeader,
    QItem,
    QItemSeparator,
    QItemSide,
    QItemMain,
    QItemTile,
    QIcon,
  QField,
  QInput,
    QFixedPosition,
  },
  data() {
    return {
      gooItems: [],
      keywords:'',
    };
  },
  props: ["cateTitle"],
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.gooItems = [
        {
          id: 2,
          name: "春季特款流行潮流男装",
          attashments: ["statics/test001.jpg"],
          originPrice: 399,
          sellPrice: 198.99,
          recommendNo: 123,
          pv: 12555
        },
        {
          id: 4,
          name: "冬季羊羔棉保暖南极人床单三件套",
          attashments: ["statics/test002.jpg"],
          originPrice: 199,
          sellPrice: 98,
          recommendNo: 1200,
          pv: 16880
        },
      ];
    },
    searchAction() {
      console.log('搜索东东');
      
    },
    toItemDetail(itemId) {
      console.log("查看商品详情:", itemId);
      this.$router.push('/mall/goo-detail')
    }
  }
};
</script>
